<!-- 头部面包屑组件
emit[changeCollapse]   改变左侧菜单的折叠状态
-->

<template>
    <div>
        <!-- 菜单折叠 -->
        <a href="javascript:void(0)" class="show-hide" @click="isCollapse = !isCollapse" :title="isCollapse ? '展开' : '折叠'">
            <el-icon :size="28" :style="{ transform: 'rotate(' + (isCollapse ? -180 : 0) + 'deg)' }">
                <Fold />
            </el-icon>
        </a>

        <!-- 面包屑导航栏 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index/home' }">{{ $t('home') }}</el-breadcrumb-item>
            <template v-for="item in $route.matched.slice(1)" :key="item.name">
                <template v-if="item.name != 'home'">
                    <el-breadcrumb-item>{{ $t(item.meta.title as string) }}</el-breadcrumb-item>
                </template>
            </template>
        </el-breadcrumb>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ArrowRight, Fold } from '@element-plus/icons-vue';

// 需要传给父组件的数据
let isCollapse = ref(false)

// 为组件定义事件changeCollapse
const emit = defineEmits<{ (e: 'changeCollapse', isCollapse: boolean): void }>();

// 监听isCollapse的变化并传递给父组件
watch(isCollapse, (isCollapse) => {
    emit("changeCollapse", isCollapse)
})

</script>

<style scoped lang="less">
.show-hide {
    display: inline-block;
    margin-right: 20px;
    float: left;

    &>i {
        transition: all 0.5s ease-out;
    }
}

.el-breadcrumb {
    display: flex;
}

.el-breadcrumb {
    line-height: 30px;
}

.el-row {
    height: 100%;
}
</style>